<template>
  <div>
    <!-- 变更方法push()
                    pop()
                    shift()
                    unshift()
                    splice()
                    sort()
                    reverse()  
        这几个方法可以改变原数组，不能用不能改变原数组的方法，如果要用，可以替换。-->
    <h4>电影列表</h4>
    <ul>
      <li v-for="item in movies" :key="item.id">{{ item.name }}</li>
    </ul>

    <input type="text" v-model="newMovie" />
    <button @clicl="addMovies">添加电影到后面</button>
    <hr />
    <button @click="addMovie2">添加电影到前面</button>
    <hr />
    <button @click="removeMovie">删除后面电影</button>
    <hr />
    <button @click="removeMovie2">删除前面电影</button>
    <hr />
    <button @click="spliceMovie">splice插入电影</button>
    <hr />
    <button @click="sortMovie">sort排序操作电影</button>
    <hr />
    <button @click="reverseMovie">reverse反转数组操作电影</button>
    <hr />
    <button @click="filterMovie">filter数组替换数组电影</button>
    <hr />
    <h4>当你利用索引直接设置一个项时,数组无效</h4>
    <button @click="setMovie">索引直接设置</button>
    <hr />
    <h4>当你修改数组的长度时,无效</h4>
    <button @click="setMovie2">修改数组的长度</button>
    <hr />
    <h4>
      vue的definePrototype（访问器属性）原因，初始时就在data里面的数据会受到监听，但是当我们给响应式的对象新增属性的时候，新增的属性并不会显示到页面中；同样对于响应式的数组，增加元素、修改数组长度时，数组的变化也不会展示在页面上。
    </h4>
    <div>名字：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
    <button @click="addProperty">新增年龄</button>
  </div>
</template>

<script>
export default {
  name: 'arrcheck',
  data() {
    return {
      newMovie: '',
      movies: [
        { id: 2, name: '盗梦空间' },
        { id: 1, name: '星际穿越' },
        { id: 4, name: '教父' },
        { id: 5, name: '龙猫' },
        { id: 6, name: '泰坦尼克号' },
        { id: 3, name: '大话西游' }
      ],
      person: {
        name: '张三'
      }
    }
  },
  methods: {
    addMovies() {
      if (this.newMovie == '') {
        alert('请输入电影名称')
        return
      }
      this.movies.push({ id: this.movies.length + 1, name: this.newMovie })
      this.newMovie = ''
    },
    addMovie2() {
      if (this.newMovie == '') {
        alert('请输入电影名')
        return
      }
      this.movies.unshift({ id: this.movies.length + 1, name: this.newMovie })
      this.newMovie = ''
    },
    removeMovie() {
      this.movies.pop()
    },
    removeMovie2() {
      this.movies.shift()
    },
    spliceMovie() {
      this.movies.splice(1, 0, { id: 3, name: '速度与激情' })
    },
    sortMovie() {
      this.movies.sort((a, b) => {
        return a.id - b.id
      })
    },
    reverseMovie() {
      this.movies.reverse()
    },
    // 不能改变原数组的方法，只能返回一个新数组，替换
    filterMovie() {
      this.movies = this.movies.filter((movie) => movie.id % 2 === 0)
    },
    // 当你利用索引直接设置一个项时,检测不到数组变动。
    setMovie() {
      this.movies[0] = { id: this.movies.length + 1, name: '少林小子' }
      /*  this.movies.splice(0, 1, {
        id: this.movies.length + 1,
        name: '少林小子'
      }) */
    },
    // 当你直接修改数组的长度时，检测不到数组变动可以用this.movies = this.movies.slice(0, 1)
    setMovie2() {
      this.movies.length = 1
      // this.movies = this.movies.slice(0, 1)
    },
    // 在 Vue.js 中，this.$set 方法用于向响应式对象中添加一个新的属性，并确保这个新属性同样是响应式的，从而触发视图的更新。这在处理数组或对象时特别有用，尤其是在你动态地向数组或对象添加新元素或属性时。
    addProperty() {
      // this.person.age = 30
      this.$set(this.person, 'age', 30)
    }
  }
}
</script>

<style lang="scss" scoped></style>
